<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单元素双向绑定</title>
    <script src="/js/vue.js"></script>
</head>
<body>
    <div id="main">
        用户名：<input type="text" v-model="user.name">  <br>
        密码：<input type="password" v-model="user.pwd">  <br>
        年龄：<input type="text" v-model.number="user.age">  <br>
        性别：
            <input type="radio" v-model="user.sex" value="male"> 男
            <input type="radio" v-model="user.sex" value="female"> 女  <br>
        爱好：
            <input type="checkbox" name="hobby" v-model="user.hobby" value="swim"> Swim
            <input type="checkbox" name="hobby" v-model="user.hobby" value="sleep"> Sleep
            <input type="checkbox" name="hobby" v-model="user.hobby" value="java"> Java  <br>
        城市：
            <select v-model="user.city">
                <option value="" selected>请选择</option>
                <option value="100">广州</option>
                <option value="200">深圳</option>
                <option value="200">北京</option>
            </select> <br>
        其他：
            <input type="text" v-model="user.dept.id">  <br>

        <button @click="saveUser">保存</button>
    </div>
    <script>
        new Vue({
            el:"#main",
            data(){
                return {
                    user:{
                        name:'匿名',
                        pwd:'',
                        age: '',
                        sex: 'female',
                        hobby:['sleep','swim'],
                        city:'bj',
                        dept:{
                            id:''
                        }
                    },
                    cities:[
                        {id:100,name:'广州'}
                    ]
                }
            },
            methods:{
                saveUser(){
                    // JSON对象转换为字符串
                    let userString = JSON.stringify(this.user);
                    console.log(userString);

                    // 字符串转换为JSON对象
                    let obj = JSON.parse(userString);
                    console.log('json对象',obj)
                }
            }
        })
    </script>
</body>
</html>